<template>
  <div id="gantt_here" style="width: 100%; height: 400px" />
</template>

<script>
const gantt = window.gantt;
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import { getGanttConfigByZoomValue } from "./utils";
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    links: {
      type: Array,
      default: () => []
    },
    gantConfig: {
      type: Object,
      default: () => {} // 甘特图配置
    },
    columnData: {
      // 表头配置
      type: Array,
      default: () => []
    },
    taskClass: {
      // 定义任务条的类名
      type: Function,
      default: undefined
    },
    taskLabel: {
      // 定义任务条label的文案和样式
      type: Function,
      default: undefined
    },
    pluginsConfig: {
      // 插件配置
      type: Object,
      default: () => {} // 甘特图配置
    }
  },
  watch: {
    gantConfig(nVal) {
      this.setGantConfig(nVal);
    },
    pluginsConfig(nVal) {
      this.setPlugin(nVal);
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    getGant() {
      return gantt;
    },
    setPlugin(pluginsConfig) {
      const defaultConfig = {
        marker: true, // 里程碑线条
        tooltip: true, // 提示语
        auto_scheduling: true, // 是否自定调度
        multiselect: true, // 是否多选
        fullscreen: true // 是否全屏
      };
      const config = { ...defaultConfig, ...pluginsConfig };
      gantt.plugins(config);
    },
    setTaskClass() {
      if (this.taskClass) {
        gantt.templates.task_class = this.taskClass;
      }
    },
    setTaskText() {
      if (this.taskLabel) {
        gantt.templates.task_text = this.taskLabel;
      }
    },
    setDateUpdate(value) {
      console.log(value, "value");
      gantt.config.scales = getGanttConfigByZoomValue(gantt, value);
      gantt.render();
    },
    setGantConfig(data) {
      const defaultGantConfig = {
        readonly: true, // 是否只读
        columns: this.columnData,
        xml_date: "%Y-%m-%d" // 日期格式
      };
      const target = { ...defaultGantConfig, ...data };
      for (const key in target) {
        gantt.config[key] = target[key];
      }
      gantt.render();
    },
    init() {
      this.setPlugin(this.pluginsConfig);

      this.setGantConfig(this.gantConfig);
      this.initGantDom();
      this.initData();
      this.setTaskClass();
      this.setTaskText();
    },
    initData() {
      gantt.parse({
        data: this.data,
        links: this.links
      });
    },
    initGantDom() {
      gantt.init("gantt_here");
    }
  }
};
</script>

<style></style>
